<!-- 个人中心 -->
<template>
  <view class="page_content">
    <!-- 头部导航 -->
    <navBar title="个人中心"></navBar>
    <!-- 用户资料 -->
    <UserInfoCard :loadingStatus="loadingStatus" class="user_info_wrap"></UserInfoCard>
    <!-- 消费历史 -->
    <CellGroup class="cell_wrap"></CellGroup>
    <!-- 会员中心 -->
    <view class="card">
      <view class="part_title">会员中心</view>
      <nut-grid :column-num="5" :border="false">
        <nut-grid-item
          :text="item.text"
          v-for="(item, index) in userGridData"
          :key="index"
          @click="getAuth(item)"
        >
          <image :src="item.icon"></image>
        </nut-grid-item>
      </nut-grid>
    </view>
    <!-- 服务与工具 -->
    <view class="card">
      <view class="part_title">服务与工具</view>
      <nut-grid :column-num="5" :border="false">
        <nut-grid-item
          :text="item.text"
          v-for="(item, index) in serverGridData"
          :key="index"
          @click="getAuth(item)"
        >
          <image :src="item.icon"></image>
        </nut-grid-item>
      </nut-grid>
    </view>
    <!-- 底部标签栏 -->
    <tabBar></tabBar>
  </view>
</template>

<script setup>
  import { ref, watchEffect } from 'vue'
  import CellGroup from './components/nut-cell-group'
  import UserInfoCard from './components/user-info-card'
  import { useOutsideUserInfoStore } from '@/store/userInfo'
  import constData from '@/api/const.js' // 常量数据
  import COMMONAPI from '@/api/modules/common'
  import commonLogin from '@/common/common'

  const useInfoStore = useOutsideUserInfoStore()
  const userGridData = constData.userGridData // 个人中心 - 会员中心
  const serverGridData = constData.serverGridData // 个人中心 - 服务与工具

  defineOptions({
    name: 'IndexPage'
  })

  // 获取openId
  const openId = computed(() => {
    return useInfoStore.openId
  })
  // 是否是crm会员isCRMUser
  const isCRMUser = computed(() => {
    return useInfoStore.isCRMUser
  })
  const loadingStatus = ref(null) // 页面加载状态

  onMounted(() => {})
  onShow(() => {})
  onLoad((options) => {})
  // 监听openId
  watch(
    () => openId.value,
    (val) => {
      loadingStatus.value = true
      commonLogin.crmLogin(getMinProBaseInfo)
      loadingStatus.value = false
    }
  )
  // 获取个人信息
  const getMinProBaseInfo = () => {
    let params = {
      appId: useInfoStore.appId,
      token: useInfoStore.userToken || '',
      smallOpenId: openId.value
    }
    COMMONAPI.API__USER_BASE_INFO_GET(params).then((res) => {
      let userInfo = res.data || {}
    })
  }

  // 点击grid
  const getAuth = (data) => {
    let val = data.gridName
    console.log(val, 'isCRMUser', useInfoStore.isCRMUser)
  }
</script>

<style lang="scss" scoped>
  .page_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // gap: 20rpx 0;
    min-height: calc(100%);

    .user_info_wrap {
      width: 100%;
    }

    .cell_wrap {
      width: 100%;
    }

    .card {
      width: 100%;
      padding: 40rpx 0;
      background-color: #fff;
    }

    .part_title {
      height: 44rpx;
      font-size: 32rpx;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 44rpx;
      padding: 0 14px;
    }

    .nut-grid-item__content image {
      display: block;
      width: 20px;
      height: 20px;
      margin: 4px auto;
    }
  }
</style>
